<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端10相对和绝对路径</title>
</head>
<body>
  <!-- 相对路径,依赖当前位置,经常使用 -->
    <!-- ./为当前位置 /代表下一级 ../代表上一级 -->
  <p>  
    <img src="./c/图片2.png" alt=""> 
    <img src="c/a/图片1.png" alt=""> 
    <img src="./favicon.ico" alt="">
  </p>
    <!-- 绝对路径分为本地绝对路径和网络绝对路径 -->
     <!-- 本地绝对路径,比较少,缺点:更换设备会比较麻烦 -->
      <img src="D:/" alt="">
      <!-- 网络绝对路径,比较多使用,在浏览器里复制网络路径,选一张图片右键点在新标签也打开 -->
       <img src="https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/5bdf9160fe4345b0aa92c4fa03ccc381~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722411874&x-signature=sRmbCYe3dqtLJA4JR89dcT44BJk%3D" alt="">

       <!-- 图片格式 -->
        jpg或.jpeg:有损压缩,支持颜色丰富,空间小,不支持透明背景和动态图,适合没有极高要求
        .png:无损压缩格式,更高质量保持图片,支持颜色丰富,空间大,支持透明背景,不支持动态图,用于想要有透明背景或更高质量的照片
        .bmp:不压缩的格式,最大程度保留图片细节,支持颜色丰富,空间极大,不支持透明背景和动态图,用于对图片要求极高的图片
        .gif:只支持256种颜色,支持简单透明背景和动态图
        .webp: 专门用来在网页上的图片,有上面几种格式的优点,但兼容性不好
        .base64 把图片进行base64编码,形成文本,只能在网页打开,传统看图没法打开,与网页一起加载
    </body>
</html>